<template>
  <div class="wrapper">
    <div class="dataName">明发活动数据总览</div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">总体数据</mt-tab-item>
      <mt-tab-item id="2">中奖明细数据</mt-tab-item>
      <mt-tab-item id="3">个人传播排行</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div class="actUserselect">
          <span class="export" @click="exportData1()">导出</span>
        </div>
        <div class="tabTitle">
          <ul>
            <li v-for="items in tabTitle" :key="items.id">{{items.content}}</li>
          </ul>
        </div>
        <div class="actCountData">
          <ul v-for="item in actCountData" :key="item.index">
            <li>
              <span>{{item.channel}}</span>
              <span>{{item.user_count}}</span>
              <span>{{item.share_count}}</span>
              <span>{{item.tellfare_count}}</span>
              <span>{{item.hb_count}}</span>
              <span>{{item.gift_count}}</span>
              <span>{{item.va_count}}</span>
              <span>{{item.houseticket_count}}</span>
            </li>
          </ul>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="actUserselect">
          <select name id @change="SelectChannel1" v-model="selectChannel">
            <option :value="n.channel" v-for="n in selectList" :key="n.id">{{n.adress}}</option>
          </select>
          <span class="export" @click="exportData2()">导出</span>
        </div>
        <div class="actUserList tabTitle">
          <ul>
            <li v-for="items in userList" :key="items.id">{{items.content}}</li>
          </ul>
        </div>
        <div class="actUserLists">
          <ul>
            <li v-for="item in actUserList" :key="item">
              <span>{{item.name}}</span>
              <span>{{item.mobile}}</span>
              <span>{{item.remark}}</span>
              <span>{{item.isreceievd!=null?(item.isreceievd==1?'是':'否'):''}}</span>
              <span>{{item.verificationtime | modifyTime}}</span>
              <span>{{item.province}}/{{item.city}}</span>
              <span>{{item.rename}}</span>
            </li>
          </ul>
        </div>
        <div class="seach" @click="serchMore(2)">查看更多</div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div class="actUserselect">
          <select name @change="SelectChannel2" v-model="selectChannel">
            <option :value="n.channel" v-for="n in selectList" :key="n.id">{{n.adress}}</option>
          </select>
          <span class="export" @click="exportData3()">导出</span>
        </div>
        <div class="tabTitle spreadList">
          <ul>
            <li v-for="items in spreadList" :key="items.id">{{items.content}}</li>
          </ul>
        </div>
        <div class="actUserLists">
          <ul>
            <li v-for="item in actSpreadList" :key="item.index">
              <span>{{item.name?item.name:item.nickname}}</span>
              <span>{{item.share_count}}</span>
              <span>{{item.szcount}}</span>
              <span>{{item.province}}/{{item.city}}</span>
            </li>
          </ul>
        </div>
        <div class="seach" @click="serchMore(3)">查看更多</div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import { Navbar, TabItem } from "mint-ui";
import Vue from "vue";
import request from "@/utils/request";
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
  data() {
    return {
      actcode: "zt20190202_text",
      selected: "1",
      isDownLoad: 0,
      offset: 0,
      lists: [
        {
          id: 1,
          content: "渠道"
        },
        {
          id: 2,
          content: "受众数量"
        },
        {
          id: 3,
          content: "总转发次数"
        },
        {
          id: 4,
          content: "话费中奖人数"
        },
        {
          id: 5,
          content: "转发激励中奖人数"
        },
        {
          id: 6,
          content: "礼品券中奖人数"
        },
        {
          id: 7,
          content: "礼品券核销人数"
        },
        {
          id: 8,
          content: "购房券中奖人数"
        }
      ],
      tabTitle: [
        {
          id: 1,
          content: "渠道"
        },
        {
          id: 2,
          content: "受众数量"
        },
        {
          id: 3,
          content: "总转发次数"
        },
        {
          id: 4,
          content: "话费中奖人数"
        },
        {
          id: 5,
          content: "转发激励中奖人数"
        },
        {
          id: 6,
          content: "礼品券中奖人数"
        },
        {
          id: 7,
          content: "礼品券核销人数"
        },
        {
          id: 8,
          content: "购房券中奖人数"
        }
      ],
      userList: [
        {
          id: 1,
          content: "昵称"
        },
        {
          id: 2,
          content: "留电"
        },
        {
          id: 3,
          content: "购房优惠券领取兑换的项目"
        },
        {
          id: 4,
          content: "礼品券是否核销"
        },
        {
          id: 5,
          content: "礼品券核销时间"
        },
        {
          id: 6,
          content: "浏览省份/城市"
        },
        {
          id: 7,
          content: "传播渠道"
        }
      ],
      spreadList: [
        {
          id: 1,
          content: "昵称"
        },
        {
          id: 2,
          content: "转发次数"
        },
        {
          id: 3,
          content: "带来的受众数量"
        },
        {
          id: 4,
          content: "浏览省份/城市"
        }
      ],
      selectList: [
        {
          id: 0,
          channel: "",
          adress: "全部"
        },
        {
          id: 1,
          channel: 50,
          adress: "马鞍山和县·明发湖光山色"
        },
        {
          id: 2,
          channel: 100,
          adress: "南京浦口·明发新城中心"
        },
        {
          id: 3,
          channel: 150,
          adress: "南京浦口·明发财富中心"
        },
        {
          id: 4,
          channel: 200,
          adress: "南京浦口.明发香山郡"
        },
        {
          id: 5,
          channel: 250,
          adress: "安徽池州.明发桃源名著"
        },
        {
          id: 6,
          channel: 300,
          adress: "南京浦口.明发阅山悦府"
        },
        {
          id: 7,
          channel: 400,
          adress: "滁州全椒.明发桃源香颂"
        },
        {
          id: 8,
          channel: 500,
          adress: "滁州来安.明发北站中心"
        },
        {
          id: 9,
          channel: 550,
          adress: "滁州来安.明发北站新城"
        },
        {
          id: 10,
          channel: 600,
          adress: "南京浦口.明发国际中心"
        },
        {
          id: 11,
          channel: 650,
          adress: "淮安金湖.明发金色水岸"
        },
        {
          id: 12,
          channel: 700,
          adress: "南京浦口.明发珍珠泉九号"
        },
        {
          id: 13,
          channel: 750,
          adress: "南京浦口.明发新城天街"
        },
        {
          id: 14,
          channel: 800,
          adress: "南京浦口.明发香山郡商铺"
        },
        {
          id: 15,
          channel: 850,
          adress: "镇江丹阳.明发锦绣街"
        },
        {
          id: 16,
          channel: 900,
          adress: "南京浦口.明发悦庭"
        },
        {
          id: 17,
          channel: 950,
          adress: "南京浦口.明发云庭"
        },
        {
          id: 18,
          channel: 350,
          adress: "宿迁泗阳.明发首府"
        },
        {
          id: 19,
          channel: 450,
          adress: "滁州全椒.桃源府邸"
        }
      ],
      actSpreadList: [],
      actUserList: [],
      selectChannel: "",
      actCountData: null
    };
  },
  watch: {
    selected(n, o) {
      this.actUser(n);
    }
  },
  methods: {
    actUser(id) {
      let _self = this;
      _self.actUserList = [];
      _self.offset = 0;
      if (id === "1") {
        return _self.ActCountData();
      }
      if (id === "2") {
        return _self.SelectChannel1();
      }
      if (id === "3") {
        return _self.SelectChannel2();
      }
    },
    //总体数据
    ActCountData() {
      let _self = this;
      request
        .get(_self.global.API_URL, {
          action: "/activity/relay/RelayAction/getMFActCountData",
          requestParam: {
            dl: 0
          }
        })
        .then(response => {
          console.log(response.obj);
          _self.actCountData = response.obj;
        });
    },
    ActUserList() {},
    //导出
    exportData1() {
      let _self = this;
      request
        .get(_self.global.API_URL, {
          action: "/activity/relay/RelayAction/getMFActCountData",
          requestParam: {
            dl: 1
          }
        })
        .then(response => {
          window.open(response.obj);
        });
    },

    exportData2() {
      let _self = this;
      request
        .get(_self.global.API_URL, {
          action: "/activity/relay/RelayAction/getMFActUserList",
          requestParam: {
            dl: 1,
            channel: _self.selectChannel,
            size: 25,
            offset: _self.offset
          }
        })
        .then(response => {
          window.open(response.obj);
        });
    },

    exportData3() {
      let _self = this;
      let obj = {
        dl: 1,
        size: 25,
        offset: _self.offset,
        actcode: _self.actcode
      };
      if (_self.selectChannel != "") {
        obj.channel = _self.selectChannel;
      }
      request
        .get(_self.global.API_URL, {
          action: "/activity/relay/RelayAction/getActSpreadCountData",
          requestParam: obj
        })
        .then(response => {
          window.open(response.obj);
        });
    },
    //下拉选中
    SelectChannel1() {
      let _self = this;
      _self.actUserList = [];
        request
          .get(_self.global.API_URL, {
            action: "/activity/relay/RelayAction/getMFActUserList",
            requestParam: {
              dl: 0,
              channel: _self.selectChannel,
              size: 25,
              offset: _self.offset
            }
          })
          .then(response => {
            _self.actUserList = _self.actUserList.concat(response.obj.list);
            if (response.obj.total <= _self.actUserList.length) {
              _self.hasMore = false;
            }
          });
    },
    SelectChannel2() {
      let _self = this;
      _self.actSpreadList = [];
      request
        .get(_self.global.API_URL, {
          action: "/activity/relay/RelayAction/getActSpreadCountData",
          requestParam: {
            dl: 0,
            channel: _self.selectChannel,
            size: 25,
            offset: 0,
            actcode: _self.actcode
          }
        })
        .then(response => {
          _self.actSpreadList = _self.actSpreadList.concat(response.obj.list);
          if (response.obj.total <= _self.actSpreadList.length) {
            _self.hasMore = false;
          }
        });
    },
    serchMore(n) {
      let _self = this;
      if (n == 2) {
        _self.offset++;
        request
          .get(_self.global.API_URL, {
            action: "/activity/relay/RelayAction/getMFActUserList",
            requestParam: {
              dl: 0,
              channel: _self.selectChannel,
              size: 25,
              offset: _self.offset
            }
          })
          .then(response => {
            _self.actUserList = _self.actUserList.concat(response.obj.list);
            if (response.obj.total <= _self.actUserList.length) {
              _self.hasMore = false;
            }
          });
      } else {
        _self.offset++;
        request
          .get(_self.global.API_URL, {
            action: "/activity/relay/RelayAction/getActSpreadCountData",
            requestParam: {
              dl: 0,
              channel: _self.selectChannel,
              size: 20,
              offset: 0,
              actcode: _self.actcode
            }
          })
          .then(response => {
            _self.actSpreadList = _self.actSpreadList.concat(response.obj.list);
            if (response.obj.total <= _self.actSpreadList.length) {
              _self.hasMore = false;
            }
          });
      }
    }
  },
  filters: {
    modifyTime(value) {
      if (value == null) {
        return "";
      } else {
        let date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + "-";
        let M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        let D = date.getDate() + " ";
        let h = date.getHours() + ":";
        let m = date.getMinutes() + ":";
        let s = date.getSeconds();
        return Y + M + D + h + m + s;
      }
    }
  },
  created() {},
  mounted() {
    if (this.selected === "1") {
      this.ActCountData(this.isDownLoad);
    }
  }
};
</script>
<style lang="stylus">
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #E2E2E2;
  background-size: 100% 100%;
}

.dataName {
  width: 100%;
  text-align: center;
  line-height: 0.5rem;
  height: 0.5rem;
  color: #000;
  font-size: 0.3rem;
}

.mint-tab-item-label {
  color: inherit;
  font-size: 24px;
  line-height: 1;
}

.tabTitle {
  width: 100%;
  background-color: #cacaca;
}

.tabTitle>ul {
  display: flex;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}

.tabTitle>ul>li {
  flex: 1;
}

.actCountData {
  width: 100%;
}

.actCountData>ul {
  width: 100%;
}

.actCountData>ul>li {
  width: 100%;
  display: flex;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  background-color: #e3e3e3;
  border-bottom: 1px solid #fff;
}

.actCountData>ul>li>span {
  flex: 1;
}

.export {
  font-size: 18px;
  display: inline-block;
  margin-left: 30px;
  width: 60px;
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
  background-color: #007aff;
  color: #fff;
  text-align: center;
}

.actUserselect {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-left: 50px;
  font-size: 16px;
}

.actUserselect>select {
  width: 300px;
  height: 35px;
}

.actUserselect>select>option {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.actUserLists {
  width: 100%;
}

.actUserLists>ul {
  width: 100%;
}

.actUserLists>ul>li {
  width: 100%;
  display: flex;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  background-color: #e3e3e3;
  border-bottom: 1px solid #fff;
}

.actUserLists>ul>li>span {
  flex: 1;
  overflow: hidden;
}

.seach {
  width: 100%;
  text-align: center;
  line-height: 40px;
  height: 40px;
  background-color: #cacaca;
  color: #fff;
  font-size: 18px;
}
</style>